<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper ul {
            width: 300px;
            list-style: none;
        }
        li {
            border: 1px solid #e1e1e1;
            border-left: 5px solid #e1e1e1;
            padding: 10px;
            margin: 10px 0;
            cursor: pointer;
        }
        li:not(.current):hover {
            border-color: #999;
        }
        .current{
            border-color: #1b76c4;
        }
        .box1 {
            width: 400px;
            height: 500px;
            border: 5px solid peachpuff;
            margin-left: 40px;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 2px solid #818080;
        }
    </style>
    <script src="./demo.js"></script>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li data-value="none" data-prop="float">float: none;</li>
            <li data-value="left" data-prop="float">float: left;</li>
            <li data-value="right" data-prop="float">float: right;</li>
        </ul>
        <div class="box1">
            <div class="box">Float me</div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam dicta illo nisi maiores quis distinctio exercitationem placeat ratione possimus accusamus accusantium provident quaerat at libero et, velit cum fugiat cupiditate minus quibusdam aliquid impedit. Modi exercitationem deserunt ullam aut earum? Mollitia vel eos nobis amet vero facere laboriosam maxime itaque? Totam, eius unde aut neque voluptates ad ullam dolores dolor quam doloremque perspiciatis maxime voluptatibus reiciendis consequuntur vero dolorem quae, est earum cum deserunt dignissimos officiis.
        </div>
    </div>
</body>
</html>